<template>
  <el-form label-position="right" label-width="auto">
    <el-form-item label="Title">
      <el-input v-model="title" placeholder="title"/>
    </el-form-item>
    <el-form-item label="Content" prop="contents">
      <el-input
          clearable
          v-model="contents"
          :rows="2"
          type="textarea"
          placeholder="please input qrcode content"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="clickHandle">Create</el-button>
      <el-button @click="loadStorageHandle">Load From Storage</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
const date = new Date()

import {ElNotification} from 'element-plus'

export default {
  data() {
    return {
      title: '',
      contents: '',
      rules: [{required: true, message: 'content is required'}],
      date: date.toLocaleDateString(),
    }
  },
  computed: {},
  methods: {
    clickHandle() {
      try {
        if (this.contents.length === 0) {
          return ElNotification({
            title: 'Warning',
            message: 'Fail：Empty title or empty content',
            type: 'warning',
          })
        }
        if (this.title.length === 0) {
          this.title = this.contents
        }
        const param = {
          title: this.title,
          contents: this.contents,
          showMask: false,
          timestamp: Date.now(),
        }
        this.$emit('createQrcode', param)
        this.contents = ''
        return (this.title = '')
      } catch (err) {
        ElNotification({
          title: 'Warning',
          message: 'Fail：' + err,
          type: 'warning',
        })
      }
    },
    loadStorageHandle() {
      console.log(this.date)
      this.$emit('loadQrcodeList', this.date)
    },
  },
}
</script>
<style>
.wrapper {
  width: 100%;
}

.action-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.btn {
  float: left;
}

.doc {
  width: 100%;
  height: 100px;
  resize: vertical;
}

.title {
  width: 100%;
}

.load-btn {
  float: right;
}

.right-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
